<template>
    <div class="zonghead">
        <div class="zongitem" :class="iszong==0?'zongactive':''" @click="toggleMode(0)">总览</div>
        <div class="zongitem" :class="iszong==1?'zongactive':''" @click="toggleMode(1)">安全中心</div>
        <div class="zongitem" :class="iszong==2?'zongactive':''" @click="toggleMode(2)">身份认证</div>
    </div>
  </template>
  
  <script>
  export default {
    props:{
        iszong: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
        };
    },
    mounted() {
       
    },
    setup() {
    },
    methods:{
        toggleMode(e){
            // this.isheads = e
            if(e == 0){
                this.$router.push({ path: '/AssetOverview'})
            }else if(e == 1){
                this.$router.push({ path: '/SecurityCenter'})
            }else if(e == 2){
                this.$router.push({ path: '/IdentOne'})
            }
            // this.$emit('toggleMode',e)
        }
    }
};
//   import { ref } from 'vue';
//   const ishead = ref('0');
//   const toggleMode = (e) => {
//     ishead.value = e;
//   };
  </script>
  
  <style lang="scss">
  // 总览样式开始
.zonghead{
    height: 41px;
    background: #121212;
    padding: 0 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .zongitem{
        margin-right: 32px;
        font-size: 11px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        cursor: pointer;
    }
    .zongactive{
        font-weight: 500;
        color: #FFFFFF;
    }
}
// 总览样式结束
  </style>